<template>
  <div class="app-container">
    <div>

      <!--      <div style="margin-top: 10px;">-->
      <!--        <el-form v-if="isAdd" ref="summaryRef" :model="form" :rules="rules" label-width="180px">-->
      <!--          <el-row>-->
      <!--            <el-col :span="22">-->
      <!--              <el-form-item label="事项名称" prop="matterName">-->
      <!--                <el-input v-model="form.matterName" placeholder="请在列表选择事项" disabled/>-->
      <!--              </el-form-item>-->
      <!--            </el-col>-->
      <!--          </el-row>-->
      <!--          <el-row>-->
      <!--            <el-col :span="11">-->
      <!--              <el-form-item label="负责人" prop="matterResponsible">-->
      <!--                <el-input v-model="form.matterResponsible" placeholder="请在列表选择事项" disabled/>-->
      <!--              </el-form-item>-->
      <!--            </el-col>-->
      <!--            <el-col :span="11">-->
      <!--              <el-form-item label="超期天数">-->
      <!--                <span v-if="overdueDays === ''"></span>-->
      <!--                <span v-else>-->
      <!--                  <el-tag v-show="overdueDays > 0" effect="dark" type="danger">{{ '超期'+ overdueDays +'天' }}</el-tag>-->
      <!--                  <el-tag v-show="overdueDays <= 0" effect="dark" type="success">未超期</el-tag>-->
      <!--                </span>-->
      <!--              </el-form-item>-->
      <!--            </el-col>-->
      <!--          </el-row>-->
      <!--          <el-row>-->
      <!--            <el-col :span="11">-->
      <!--              <el-form-item label="完成结果" prop="summaryResult">-->
      <!--                <el-select v-model="form.summaryResult" placeholder="请选择完成结果">-->
      <!--                  <el-option-->
      <!--                    v-for="dict in sys_yes_no"-->
      <!--                    :key="dict.value"-->
      <!--                    :label="dict.label"-->
      <!--                    :value="dict.value"-->
      <!--                  ></el-option>-->
      <!--                </el-select>-->
      <!--              </el-form-item>-->
      <!--            </el-col>-->
      <!--            <el-col :span="11">-->
      <!--              <el-form-item label="完成时间" prop="summaryDate">-->
      <!--                <el-date-picker clearable-->
      <!--                  style="width: 100%;"-->
      <!--                  v-model="form.summaryDate"-->
      <!--                  type="date"-->
      <!--                  value-format="YYYY-MM-DD"-->
      <!--                  placeholder="请选择完成时间">-->
      <!--                </el-date-picker>-->
      <!--              </el-form-item>-->
      <!--            </el-col>-->
      <!--          </el-row>-->
      <!--          <el-row>-->
      <!--            <el-col :span="22">-->
      <!--              <el-form-item label="事项总结" prop="summaryReport">-->
      <!--                <el-input v-model="form.summaryReport" type="textarea" :rows="4" placeholder="请输入事项总结" />-->
      <!--              </el-form-item>-->
      <!--            </el-col>-->
      <!--          </el-row>-->
      <!--          <el-row>-->
      <!--            <el-col :span="9">-->
      <!--            </el-col>-->
      <!--            <el-col :span="11">-->
      <!--              <el-button type="primary" @click="submitForm" style="margin-left: 30px;">提交总结</el-button>-->
      <!--              <el-button type="info" @click="cancel" style="margin-left: 30px;">取 消</el-button>-->
      <!--            </el-col>-->
      <!--          </el-row>-->
      <!--        </el-form>-->

      <!--        <el-form v-else ref="summaryRef" :model="form" label-width="180px">-->
      <!--          <el-row>-->
      <!--            <el-col :span="22">-->
      <!--              <el-form-item label="事项名称" prop="matterName">-->
      <!--                <el-input v-model="form.matterName" placeholder="请在列表选择事项" disabled/>-->
      <!--              </el-form-item>-->
      <!--            </el-col>-->
      <!--          </el-row>-->
      <!--          <el-row>-->
      <!--            <el-col :span="11">-->
      <!--              <el-form-item label="负责人" prop="matterResponsible">-->
      <!--                <el-input v-model="form.matterResponsible" placeholder="请在列表选择事项" disabled/>-->
      <!--              </el-form-item>-->
      <!--            </el-col>-->
      <!--            <el-col :span="11">-->
      <!--              <el-form-item label="超期天数">-->
      <!--                <span v-if="overdueDays === ''"></span>-->
      <!--                <span v-else>-->
      <!--                  <el-tag v-show="overdueDays > 0" effect="dark" type="danger">{{ '超期'+ overdueDays +'天' }}</el-tag>-->
      <!--                  <el-tag v-show="overdueDays <= 0" effect="dark" type="success">未超期</el-tag>-->
      <!--                </span>-->
      <!--              </el-form-item>-->
      <!--            </el-col>-->
      <!--          </el-row>-->
      <!--          <el-row>-->
      <!--            <el-col :span="11">-->
      <!--              <el-form-item label="完成结果" prop="summaryResult">-->
      <!--                <el-select v-model="form.summaryResult" placeholder="请在列表选择事项" disabled>-->
      <!--                  <el-option-->
      <!--                    v-for="dict in sys_yes_no"-->
      <!--                    :key="dict.value"-->
      <!--                    :label="dict.label"-->
      <!--                    :value="dict.value"-->
      <!--                  ></el-option>-->
      <!--                </el-select>-->
      <!--              </el-form-item>-->
      <!--            </el-col>-->
      <!--            <el-col :span="11">-->
      <!--              <el-form-item label="完成时间" prop="summaryDate">-->
      <!--                <el-date-picker clearable-->
      <!--                  disabled-->
      <!--                  style="width: 100%;"-->
      <!--                  v-model="form.summaryDate"-->
      <!--                  type="date"-->
      <!--                  value-format="YYYY-MM-DD"-->
      <!--                  placeholder="请在列表选择事项">-->
      <!--                </el-date-picker>-->
      <!--              </el-form-item>-->
      <!--            </el-col>-->
      <!--          </el-row>-->
      <!--          <el-row>-->
      <!--            <el-col :span="22">-->
      <!--              <el-form-item label="事项总结" prop="summaryReport">-->
      <!--                <el-input disabled v-model="form.summaryReport" type="textarea" :rows="4" placeholder="请在列表选择事项" />-->
      <!--              </el-form-item>-->
      <!--            </el-col>-->
      <!--          </el-row>-->
      <!--        </el-form>-->
      <!--      </div>-->
    </div>
  </div>
  <div class="app-container">
    <ElLine :title="'事项列表'" style="margin-bottom: 10px;"></ElLine>
    <div style="padding-bottom: 10px">
      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item prop="keyWord" style="width: 100%;">
              <el-input
                  v-model="queryParams.keyWord"
                  placeholder="事项名称"
                  clearable
                  @keyup.enter.native="handleQuery"
                  suffix-icon="search"
                  :suffix-icon-click="handleQuery"
              />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="6">
            <el-form-item prop="isKeyWork" style="width: 100%;">
              <el-select v-model="queryParams.isKeyWork" placeholder="请选择是否为重点工作" clearable>
                <el-option v-for="item in matter_work_type" :key="item.value" :label="item.label"
                           :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="isTimeOut" style="width: 100%;">
              <el-select v-model="queryParams.isTimeOut" placeholder="请选择是否超期" clearable>
                <el-option v-for="item in matter_overdue" :key="item.value" :label="item.label"
                           :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
          <el-col :span="4">
            <div>
              <el-button type="primary" icon="search" size="mini" @click="handleQuery">查询</el-button>
              <el-button icon="refresh" size="mini" @click="resetQuery">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <el-table
          v-loading="loading"
          :data="matterList"
          :row-key="row => row.matterId"
          :expand-row-keys="expandedRows"
          @expand-change="handleExpandChange"
          @selection-change="handleSelectionChange"
      >
        <el-table-column type="expand" min-width="3%" label="展开">
          <template #default="scope">
            <div style="margin: 10px 0;">
              <el-form v-if="isAdd" ref="summaryRef" :model="form" :rules="rules" label-width="180px">
                <el-row>
                  <el-col :span="22">
                    <el-form-item label="事项名称" prop="matterName">
                      <el-input v-model="form.matterName" placeholder="请在列表选择事项" disabled/>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="11">
                    <el-form-item label="负责人" prop="matterResponsible">
                      <el-input v-model="form.matterResponsible" placeholder="请在列表选择事项" disabled/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="11">
                    <el-form-item label="超期天数">
                      <span v-if="overdueDays === ''"></span>
                      <span v-else>
                  <el-tag v-show="overdueDays > 0" effect="dark" type="danger">{{
                      '超期' + overdueDays + '天'
                    }}</el-tag>
                  <el-tag v-show="overdueDays <= 0" effect="dark" type="success">未超期</el-tag>
                </span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="11">
                    <el-form-item label="完成结果" prop="summaryResult">
                      <el-select v-model="form.summaryResult" placeholder="请选择完成结果">
                        <el-option
                            v-for="dict in sys_yes_no"
                            :key="dict.value"
                            :label="dict.label"
                            :value="dict.value"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="11">
                    <el-form-item label="完成时间" prop="summaryDate">
                      <el-date-picker clearable
                                      style="width: 100%;"
                                      v-model="form.summaryDate"
                                      type="date"
                                      value-format="YYYY-MM-DD"
                                      placeholder="请选择完成时间">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="22">
                    <el-form-item label="事项总结" prop="summaryReport">
                      <el-input v-model="form.summaryReport" type="textarea" :rows="4" placeholder="请输入事项总结"/>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="9">
                  </el-col>
                  <el-col :span="11">
                    <el-button type="primary" @click="submitForm" style="margin-left: 30px;">提交总结</el-button>
                    <el-button type="info" @click="cancel" style="margin-left: 30px;">取 消</el-button>
                  </el-col>
                </el-row>
              </el-form>

              <el-form v-else ref="summaryRef" :model="form" label-width="180px">
                <el-row>
                  <el-col :span="22">
                    <el-form-item label="事项名称" prop="matterName">
                      <el-input v-model="form.matterName" placeholder="请在列表选择事项" disabled/>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="11">
                    <el-form-item label="负责人" prop="matterResponsible">
                      <el-input v-model="form.matterResponsible" placeholder="请在列表选择事项" disabled/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="11">
                    <el-form-item label="超期天数">
                      <span v-if="overdueDays === ''"></span>
                      <span v-else>
                  <el-tag v-show="overdueDays > 0" effect="dark" type="danger">{{
                      '超期' + overdueDays + '天'
                    }}</el-tag>
                  <el-tag v-show="overdueDays <= 0" effect="dark" type="success">未超期</el-tag>
                </span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="11">
                    <el-form-item label="完成结果" prop="summaryResult">
                      <el-select v-model="form.summaryResult" placeholder="请在列表选择事项" disabled>
                        <el-option
                            v-for="dict in sys_yes_no"
                            :key="dict.value"
                            :label="dict.label"
                            :value="dict.value"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="11">
                    <el-form-item label="完成时间" prop="summaryDate">
                      <el-date-picker clearable
                                      disabled
                                      style="width: 100%;"
                                      v-model="form.summaryDate"
                                      type="date"
                                      value-format="YYYY-MM-DD"
                                      placeholder="请在列表选择事项">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="22">
                    <el-form-item label="事项总结" prop="summaryReport">
                      <el-input disabled v-model="form.summaryReport" type="textarea" :rows="4"
                                placeholder="请在列表选择事项"/>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :offset="11">
                    <el-button type="primary" style="text-align: center" @click="openWord(form.matterId)">生成报告</el-button>
                  </el-col>
                </el-row>
              </el-form>
            </div>


          </template>
        </el-table-column>
        <!-- <el-table-column min-width="3%" label="序号" align="center" type="index"/> -->
        <el-table-column min-width="15%" label="事项名称" align="left">
          <template #default="scope">
            <el-text type="primary" style="cursor: pointer"
                     @click="toggleExpand(scope.row)"
            >{{ scope.row.matterName }}

            </el-text>
          </template>
        </el-table-column>
        <el-table-column min-width="6%" label="负责人" align="center" prop="matterResponsible"/>
        <el-table-column min-width="6%" label="关联人" align="center" prop="em2"/>
        <el-table-column min-width="6%" label="完成期限" align="center" prop="completionDeadline" :formatter="formatDate"/>
        <el-table-column min-width="5%" label="事项状态" align="center">
          <template #default="scope">
            <dict-tag :options="task_status" :value="scope.row.em4"/>
          </template>
        </el-table-column>
        <el-table-column min-width="8%" label="总结操作" align="center">
          <template #default="scope">
            <el-button v-if="scope.row.workSummaryId == null" type="primary" size="small" icon="Edit"
                       @click="handleExpandChange(scope.row)">添加总结
            </el-button>
            <el-button v-else type="success" size="small" icon="View" @click="handleExpandChange(scope.row)">查看总结
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
              v-show="total>0"
              :total="total"
              v-model:page="queryParams.pageNum"
              v-model:limit="queryParams.pageSize"
              @pagination="getList"
          />
    </div>
  </div>
  <el-dialog v-model="data.openWordOpen"  width="1200" :min-height="800">
    <el-line title="工作报告" style="margin:10px 0 10px 0"></el-line>
    <div style="margin: 0px 10px 10px 0px;text-align:right">
      <el-button style="width: 80px" type="warning" @click="print">打印</el-button>
      <el-button style="width: 80px" @click="downloadAsWord"  type="success">下载</el-button>
<!--      <el-button v-show="initData.isAdd" style="width: 80px" type="primary" @click="saveWorkReportM">归档</el-button>-->
    </div>
    <editor v-model="data.reportData.content" :min-height="400"/>
<!--    <editor v-else :read-only="!initData.isAdd" v-model="initData.form.content" :min-height="400"/>-->
  </el-dialog>
  <div style="display: none" v-html="data.reportData.content" id="printMe"></div>
</template>

<script setup name="MatterSummary">
import {listSummary, addSummary} from "@/api/summary/summary";
import {getDaysDifference} from '@/utils/ruoyi'
import {reactive, ref} from "vue";
import {getMatter} from "../../../api/matter/matter.js";
import exportWord from "html-doc-js";
import {workReportHtmlPrint} from "../../../utils/ruoyi.js";

const {proxy} = getCurrentInstance();
const {
  matter_work_type,
  task_status,
  sys_yes_no
} = proxy.useDict('matter_work_type', 'task_status', 'sys_yes_no');

const matterList = ref([]);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const loading = ref(true);
const total = ref(0);
const showSearch = ref(true);

const data = reactive({
  expandedRows: [],
  form: {},
  reportData: {},
  openWordOpen: false,
  matterId: null,
  rules: {
    workMatterId: [
      {required: true, message: '请选择事项任务', trigger: 'blur'},
    ],
    summaryReport: [
      {required: true, message: '请填写事项总结', trigger: 'blur'},
    ],
    summaryResult: [
      {
        required: true,
        message: '请选择完成结果',
        trigger: 'change',
      },
    ],
    summaryDate: [
      {
        type: 'date',
        required: true,
        message: '请选择完成时间',
        trigger: 'change',
      },
    ]
  },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    isKeyWork: null, //是否重要工作
    isTimeOut: null, //是否超期
    keyWord: null // 关键词
  }
});

const {queryParams, form, rules, expandedRows} = toRefs(data);

function openWord(matterId) {
  getMatter(matterId).then((res) => {
    if (res.code == 200) {
      data.reportData = res.data;
      let matterName = data.reportData.matterName;
      let createTime = data.reportData.createTime;
      let contentCount = 0;
      let defVal = "      ";
      // 工作内容
      let contentNames = defVal;
      // 协同人
      let collaboratorsName = defVal;
      // 协同内容
      let collaborationNeed = defVal;
      // 催办人
      let dialogUserName = defVal;
      // 催办时间
      let dialogUserTime = defVal;
      // 催办意见
      let dialogContent = defVal;
      // 已落实记录
      let workPrtKeyNode1 = "";
      // 未落实记录
      let workPrtKeyNode2 = "";
      // 计划完成时间
      let completionDeadline = defVal;
      if (data.reportData.completionDeadline) {
        completionDeadline = data.reportData.completionDeadline;
      }
      if (data.reportData.workContentList != null && data.reportData.workContentList.length > 0) {
        contentCount = data.reportData.workContentList.length;
        contentNames = data.reportData.workContentList.map(item => item.workContentDescription).join(',');
      }
      if (data.reportData.workCollaborationList != null && data.reportData.workCollaborationList.length > 0) {
        collaboratorsName = data.reportData.workCollaborationList.map(item => item.collaboratorsName).join(',');
        collaborationNeed = data.reportData.workCollaborationList.map(item => item.collaborationNeed).join(',');
      }

      if (data.reportData.workDialogList != null && data.reportData.workDialogList.length > 0) {
        dialogUserName = data.reportData.workDialogList.map(item => item.dialogUserName).join(',');
        dialogUserTime = data.reportData.workDialogList.map(item => item.createTime).join(',');
        dialogContent = data.reportData.workDialogList.map(item => item.dialogContent).join(',');
      }

      if (data.reportData.workMatterPracticableList != null &&data.reportData.workMatterPracticableList.length > 0) {
        let workMatterPracticableList1 = data.reportData.workMatterPracticableList.filter(item => item.workPrtIsComlt == 1);// 完成
        let workMatterPracticableList2 = data.reportData.workMatterPracticableList.filter(item => item.workPrtIsComlt == 0);// 为完成
        if (workMatterPracticableList1.length > 0) {
          workPrtKeyNode1 = workMatterPracticableList1.map(item => item.workPrtKeyNode).join(',')
        }
        if (workMatterPracticableList2.length > 0) {
          workPrtKeyNode2 = workMatterPracticableList2.map(item => item.workPrtKeyNode).join(',')
        }
      }

      data.reportData.content = `<p class="ql-align-center">
<br></p><p class="ql-align-center"><br></p><h3 class="ql-align-center"> <strong id="reportName" class="ql-size-large">关于《${matterName}》的工作报告</strong></h3><p class="ql-align-center"><br></p><p class="ql-align-center">&nbsp;</p><p class="ql-indent-1"><span class="ql-size-large">              </span>\t<span class="ql-size-large">${matterName}于${createTime}开始，共有${contentCount}项工作内容，分别为:${contentNames}。</span></p><p><span class="ql-size-large">                        </span></p><p><span class="ql-size-large">                         由${collaboratorsName}协助完成${collaborationNeed}。</span></p><p class="ql-indent-1"><br></p><p class="ql-indent-1">&nbsp;                          <span class="ql-size-large">期间${dialogUserName}于${dialogUserTime}督办此事项，要求${dialogContent}。</span></p><p><br></p><p><span class="ql-size-large">                         目前已完成工作：</span></p><p><br></p><p><br></p><p><span class="ql-size-large">                                    落实记录：${workPrtKeyNode1}</span></p><p><br></p><p>&nbsp;</p><p><span class="ql-size-large">                                 未完成工作：</span></p><p><br></p><p>&nbsp;</p><p><span class="ql-size-large">                                    落实记录：${workPrtKeyNode2}</span></p><p><br></p><p>&nbsp;</p><p><span class="ql-size-large">                         计划于${completionDeadline}完成全部工作内容，并结项。</span></p><p><br></p><p>&nbsp;</p>`
      data.openWordOpen = true;
    }
  });
}
function downloadAsWord() {
  const wrap = document.getElementById('printMe');
  const styleData = reactive({
    'class="ql-align-center': 'style="text-align: center;',
    'ql-size-large': 'font-size: 1.5em;',
    'ql-indent-1': 'counter-increment: list-1;',
  });
  for (let key in styleData) {
    if (styleData.hasOwnProperty(key)) { // 替换class 为内联样式
      wrap.innerHTML = wrap.innerHTML.replaceAll(key, styleData[key]);
    }
  }
  const config = {
    document: document, //默认当前文档的document 导出内容是iframe内部时需要使用iframe的document（getElementById('#iframe').contentDocument），注意iframe同域
    addStyle: true, // 是否导出样式，默认为true，此操作会将所有样式转换成行内样式导出
    fileName: '工作报告', // 导出文件名（不需要后缀） 存在文件名则会直接下载 否则会仅在success中返回blob
    toImg: ["canvas", "mjx-math"], // 页面哪些部分需要转化成图片，例如echart图表之类
    success(blob, dom) {
    } // 完成之后回调， blob及完整处理后dom
  }
  exportWord(wrap,config)
}
function print(){
  workReportHtmlPrint('printMe');
}
function getList() {
  loading.value = true;
  listSummary(queryParams.value).then((response) => {
    matterList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
};

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  queryParams.value = {
    isKeyWork: null, //是否重要工作
    isTimeOut: null, //是否超期
    keyWord: null // 关键词
  }
  handleQuery();
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.targetId);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

const overdueDays = ref('');
const isAdd = ref(false);

function handleExpandChange(row, expanded) {
  handleAdd(row)
  if (data.expandedRows.includes(row.matterId)) {
    data.expandedRows = data.expandedRows.filter(id => matterId !== row.matterId);
  } else {
    data.expandedRows = [row.matterId];
  }

};

function toggleExpand(row) {
  handleAdd(row)
  if (data.expandedRows.includes(row.matterId)) {
    data.expandedRows = data.expandedRows.filter(id => id !== row.matterId);
  } else {
    data.expandedRows = [row.matterId];
  }
};

function handleAdd(row) {
  if (row.workSummaryId == null) {
    isAdd.value = true
    form.value = Object.assign({}, row);
    form.value.workMatterId = form.value.matterId
    overdueDays.value = getDaysDifference(form.value.completionDeadline)
    console.log(overdueDays.value)
  } else {
    handleView(row)
  }
}

function handleView(row) {
  isAdd.value = false
  form.value = Object.assign({}, row);
  overdueDays.value = getDaysDifference(form.value.completionDeadline, form.value.summaryDate)
  console.log(overdueDays.value)
}

// 取消按钮
function cancel() {
  isAdd.value = false
  // 表单重置
  form.value = {};
  overdueDays.value = ''
  proxy.resetForm("summaryRef");
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["summaryRef"].validate(valid => {
    if (valid) {
      loading.value = true;
      const summaryForm = {
        workMatterId: form.value.workMatterId,
        summaryDate: form.value.summaryDate,
        summaryResult: form.value.summaryResult,
        summaryReport: form.value.summaryReport
      }
      addSummary(summaryForm).then(response => {
        loading.value = false;
        proxy.$modal.msgSuccess("提交成功");
        isAdd.value = false;
        getList();
      });
    }
  });
}

getList();
</script>
<style scoped>
.app-container {
  padding: 0px;
}

.app-container-list {
  padding: 10px;
  margin-left: 20px;
}
</style>
